<template>
	<div>
		<div class="user-card mt10">
			<p class="text-title">数据更新提醒</p>
			<el-divider border-style="dashed" />
			<ul class="nav-menu">
				<li class="nav-item" v-for="(data, k) in changeData" :key="k">
					<p class="nav-item-label">
						<span class="mr8">{{ talbeName[k] }}</span>
						<span>数据更新提醒</span>
					</p>
					<div>
						<ul class="flex align-center">
							<li class="flex align-center mr8 f16" v-for="(item, index) in data" :key="index">
								<p class="mr8">{{ item.ruleLabel }}</p>
								<template v-if="item.rule == 1">
									<el-date-picker :editable="false" v-model="item.value" format="M" value-format="M" type="month" placeholder="请选择月份" @change="handleChange(item, 1)" />
									<span>月</span>
								</template>
								<template v-else>
									<el-input-number
										v-model="item.value"
										:precision="0"
										:step="1"
										controls-position="right"
										style="width: 200px"
										@change="handleChange(item, 1)"
									/>
									<span>天</span>
								</template>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>

		<div class="user-card mt10">
			<p class="text-title">证件/协议即将过期提醒</p>
			<el-divider border-style="dashed" />
			<ul class="nav-menu">
				<li class="nav-item" v-for="(data, k) in expireData" :key="k">
					<div v-for="(item, index) in data" :key="index">
						<p class="nav-item-label">
							<span class="mr8">{{ talbeName[k] }}</span>
							<span>{{ item.subCategoryLabel }}</span>
						</p>
						<div class="flex align-center">
							<p class="mr8">提前提醒时间</p>
							<el-input-number
								v-model="item.value"
								:precision="0"
								:step="1"
								controls-position="right"
								style="width: 200px"
								@change="handleChange(item, 2)"
							>
							</el-input-number>
							<span>天</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'

const expireData = ref({}) as any
const changeData = ref({}) as any

const talbeName = {
	dp_foundation_practitioners_material: '从业人员',
	dp_service_object_material: '服务对象',
	dp_service_org_material: '养老机构',

	dp_service_object: '服务对象',
	dp_service_org_base: '养老机构',
	dp_foundation_practitioners: '从业人员',
}
const getCategoy1 = () => {
	apiMod
		.view_dpConfig_map({
			category: 1,
			subCategory: 1,
		})
		.then((res) => {
			const data = res.data
			changeData.value = data
		})
}
const getCategoy2 = () => {
	apiMod
		.view_dpConfig_map({
			category: 1,
			subCategory: 2,
		})
		.then((res) => {
			const data = res.data
			expireData.value = data
		})
}
const getInitData = () => {
	getCategoy1()
	getCategoy2()
}
const handleChange = (item, type) => {
	apiMod
		.view_dpConfig_edit({
			id: item.id,
			value: item.value,
		})
		.then(() => {
			ElMessage.success('更新成功')
			if (type == 1) {
				getCategoy1()
			} else {
				getCategoy2()
			}
		})
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.user-card {
	background: #fff;
	padding: 10px;
	border-radius: 4px;
	.text-title {
		padding-top: 15px;
		color: #000;
		font-weight: 600;
		font-size: 16px;
	}
}
.nav-menu {
	.nav-item {
		padding: 10px;
		border-bottom: 1px solid #eee;
		&-label {
			color: #000;
			font-weight: 700;
			padding-bottom: 10px;
		}
	}
}
</style>
